@extends('layouts.back_stage')
@section('content')
    <style>
        .tableBg{padding:30px;background:#fff;margin-top:30px;overflow: hidden;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .add-box .el-dialog__body{display: inline-block;}
        [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">导入异常订单</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="shopInfos" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="tableBg" style="margin-top:10px;">
                        <el-table :data="tableInfo" size="mini" border style="margin-top:20px;">
                            <el-table-column prop="theme" width="170" label="订货会" :resizable='false'></el-table-column>
                            <el-table-column prop="girard" width="100" label="款号" :resizable='false'>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.warning===1" style="color: red;">@{{scope.row.girard}}</span>
                                    <span v-else>@{{scope.row.girard}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="color" width="80" label="颜色" :resizable='false'>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.warning===1 || scope.row.warning===3 || scope.row.warning===8" style="color: red;">@{{scope.row.color}}</span>
                                    <span v-else>@{{scope.row.color}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="吊牌价/元" align="right" width="130" :resizable='false'>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.warning===1 || scope.row.warning===8 || scope.row.warning===5" style="color: red;">@{{scope.row.price}}</span>
                                    <span v-else>@{{scope.row.price}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="warning" label="描述" :resizable='false'>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.warning===1" style="color: red;">款号错误,前往商品档案更改正确款号</span>
                                    <span v-if="scope.row.warning===3" style="color: red;">颜色错误</span>
                                    <span v-if="scope.row.warning===5" style="color: red;">价格错误</span>
                                    <span v-if="scope.row.warning===8" style="color: red;">颜色错误，价格错误</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="50" :resizable='false'>
                                <template slot-scope="scope">
                                    <div v-if="scope.row.warning===1">-</div>
                                    <div v-else>
                                        <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination-box">
                            <el-pagination @current-change="changePageSkip" :current-page="currentPage" :total="total" layout="prev, pager, next" background></el-pagination>
                        </div>
                    </div>
                </div>
                <el-dialog :title="tit" :visible.sync="showBox" class="add-box" width="60%">
                    <el-form :model="addAct" width="500">
                        <div style="width:100%;float:left;" v-show="colorShow">
                            <div style="width:49%;float:left;border-right:1px solid #ccc;" >
                                <el-form-item label="系统颜色" label-width="100px" style="width:70%;">
                                    <template v-for = "(item1,index1) in colorArr1">
                                        <el-input :key="index1" v-model="proCol[index1]"  class="input-nums" size="small"></el-input>
                                    </template>
                                </el-form-item>
                            </div>
                            <div style="width:49%;float:left;">
                                <el-form-item label="订货颜色" label-width="100px" style="width:70%;">
                                    <template v-for = "(item2,index2) in colorArr2">
                                        <el-input :key="index2" v-model="ordCol[index2]"  class="input-nums" size="small"></el-input>
                                    </template>
                                </el-form-item>
                            </div>
                        </div>
                        <div style="width:100%;float:left;" v-show="priceShow">
                            <div style="width:49%;float:left;border-right:1px solid #ccc;">
                                <el-form-item label="系统价格" label-width="100px" style="width:70%;">
                                    <template v-for = "(item3,index3) in priceArr1">
                                        <el-input :key="index3" v-model="proPri[index3]"  class="input-nums" size="small"></el-input>
                                    </template>
                                </el-form-item>
                            </div>
                            <div style="width:49%;float:left;">
                                <el-form-item label="订货价格" label-width="100px" style="width:70%;">
                                    <template v-for = "(item4,index4) in priceArr2">
                                        <el-input :key="index4" v-model="ordPri[index4]"  class="input-nums" size="small"></el-input>
                                    </template>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="sureBtn" size="small">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <script>
        new Vue({
            el: '#shopInfos',
            data:{
                tableInfo:[], //表格数据
                total:1,  //table总条数
                currentPage:1, //table当前页数

                showBox:false,//显示隐藏
                addAct:{

                },
                tit:'',//标题
                proCol:[],//系统颜色保存取值
                colorArr1:[],
                ordCol:[],//订货颜色保存取值
                colorShow:false,
                colorArr2:[],
                proPri:[],//系统价格保存取值
                priceArr1:[],
                ordPri:[],//订货价格保存取值
                priceArr2:[],
                priceShow:false,

                warning:'',
                girard:'',
                oldColor:'',

                handleEditFlag:true,
            },
            mounted(){
                this.listInfo();
            },
            methods:{
                /*列表数据*/
                listInfo(type){
                    var that = this;
                    let skip;
                    if(type == 'reset'){
                        skip = 0;
                    }else{
                        skip = that.currentPage-1;
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/meeting-order/meeting-girards-warning',
                        data: {
                            import_id:'{{$import_id}}',
                            skip:skip,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                var opt=[];
                                let i = 0;
                                for(var value of data.content.data){
                                    opt.push({
                                        'loop':i+(10*skip),
                                        'theme':value.theme,
                                        'girard':value.girard,
                                        'color':value.color,
                                        'price':value.price,
                                        'warning':value.warning,
                                    })
                                }
                                that.tableInfo = opt;
                                that.total = data.content.total;
                                that.currentPage = data.content.skip;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                changePageSkip(val){
                    //console.log(val);
                    this.currentPage = val;
                    this.listInfo();
                },
                /*修改*/
                handleEdit(index,row){
                    //console.log(row);
                    var that=this;
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '是否确认修改该款号异常信息?'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                if (that.handleEditFlag == true) {
                                    that.handleEditFlag = false;
                                    $.ajax({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                        },
                                        type: 'post',
                                        url: '/meeting-order/pro-base-info',
                                        data: {
                                            import_id: '{{$import_id}}',
                                            girard: row.girard,
                                            color: row.color,
                                            price: row.price,
                                            warning: row.warning,
                                        },
                                        success: function (data) {
                                            //console.log(data);
                                            if (data.result.success) {
                                                that.tit = '款号：' + row.girard + ' 异常信息';
                                                that.warning = row.warning;
                                                that.girard = row.girard;
                                                if (row.warning == 3) {
                                                    that.proCol = data.content.pro_data.color.split(",");
                                                    that.colorArr1 = data.content.pro_data.color.split(",");
                                                    that.ordCol = data.content.order_data.color.split(",");
                                                    that.oldColor = data.content.order_data.color.split(",");//原始颜色
                                                    that.colorArr2 = data.content.order_data.color.split(",");
                                                    that.colorShow = true;
                                                    that.priceShow = false;
                                                } else if (row.warning == 5) {
                                                    that.proPri = data.content.pro_data.retail_price.split(",");
                                                    that.priceArr1 = data.content.pro_data.retail_price.split(",");
                                                    that.ordPri = data.content.order_data.retail_price.split(",");
                                                    that.priceArr2 = data.content.order_data.retail_price.split(",");
                                                    that.priceShow = true;
                                                    that.colorShow = false;
                                                } else if (row.warning == 8) {
                                                    that.proCol = data.content.pro_data.color.split(",");
                                                    that.colorArr1 = data.content.pro_data.color.split(",");
                                                    that.ordCol = data.content.order_data.color.split(",");
                                                    that.oldColor = data.content.order_data.color.split(",");//原始颜色
                                                    that.colorArr2 = data.content.order_data.color.split(",");

                                                    that.proPri = data.content.pro_data.retail_price.split(",");
                                                    that.priceArr1 = data.content.pro_data.retail_price.split(",");
                                                    that.ordPri = data.content.order_data.retail_price.split(",");
                                                    that.priceArr2 = data.content.order_data.retail_price.split(",");
                                                    that.colorShow = true;
                                                    that.priceShow = true;
                                                }
                                                done();
                                                that.showBox = true;
                                                that.handleEditFlag = true;
                                            } else {
                                                that.$notify.error({
                                                    title: '错误',
                                                    message: data.result.errorMsg
                                                });
                                                that.handleEditFlag = true;
                                            }
                                        }
                                    })
                                }
                            } else {
                                done();
                            }
                        }
                    }).then(action => {

                    });
                },
                sureBtn() {
                    var that=this;
                    if(this.warning==3){
                        var res={
                            retail_color:that.proCol.join(","),
                            color:that.ordCol.join(","),
                            import_id:'{{$import_id}}',
                            girard:that.girard,
                            warning:that.warning,
                            oldColor:that.oldColor.join(","),
                        }
                    }else if(this.warning==5){
                        var res={
                            retail_price:that.proPri.join(","),
                            price:that.ordPri.join(","),
                            import_id:'{{$import_id}}',
                            girard:that.girard,
                            warning:that.warning,
                        }
                    }else if(this.warning==8){
                        var res={
                            retail_color:that.proCol.join(","),
                            color:that.ordCol.join(","),
                            retail_price:that.proPri.join(","),
                            price:that.ordPri.join(","),
                            import_id:'{{$import_id}}',
                            girard:that.girard,
                            warning:that.warning,
                            oldColor:that.oldColor.join(","),
                        }
                    }
                    if(that.proPri.toString()!=that.ordPri.toString()){
                        that.$notify.error({
                            title: '提示',
                            message: "系统价格与订货价格不一致"
                        });
                        return false;
                    }
                    if(that.proPri.length<2 && that.ordPri.length>=2){
                        that.$notify.error({
                            title: '提示',
                            message: "系统价格与订货价格不一一对应"
                        });
                        return false;
                    }
                    if(that.proPri.length>=2 && that.ordPri.length<2){
                        that.$notify.error({
                            title: '提示',
                            message: "系统价格与订货价格不一一对应"
                        });
                        return false;
                    }
                    if(that.proPri.length>=2 && that.ordPri.length>=2){
                        if(Number(that.proPri[0])-Number(that.proPri[1])>0 || Number(that.ordPri[0])-Number(that.ordPri[1])>0){
                            that.$notify.error({
                                title: '提示',
                                message: "前者小码价格不能大于后者大码价格"
                            });
                            return false;
                        }
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/meeting-order/pro-info-coverage',
                        data: res,
                        success: function (data) {
                            console.log(data);
                            if(data.result.success){
                                that.$notify.success({
                                    title: '提示',
                                    message: "操作成功"
                                });
                                that.listInfo();
                                that.showBox=false;
                            }else{
                                that.$notify.error({
                                    title: '错误',
                                    message: data.result.errorMsg
                                });
                            }
                        }
                    })

                }
            }
        });
    </script>
@endsection
